<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';
import img_1 from './assets/bg.png';
import img_2 from './assets/1-1-bg.png';
import left_1 from './components/left_1.vue';
import left_2 from './components/left_2.vue';
// import brokenline from './components/brokenline.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import { name } from 'file-loader';
import api from '@/http/public.js';
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,
        left_1,
        left_2,
    },
    setup() {
        const ViewRef = ref(null);
        const topList = ref([
            { name: '实时有功功率', unit: 'MW', value: '55' },
            { name: '实时无功功率', unit: 'MVar', value: '44' },
            { name: '实时功率因数', unit: '', value: '55' },
            { name: '调度有功功率', unit: 'MW', value: '66' },
            { name: '调度无功功率', unit: 'MVar', value: '77' },
        ]);
        const dataContainer = reactive({
            loading: false,
            img: {
                img_1,
                img_2,
            },
            leftOne: [],
            data: [
                { value: 0, name: '当前电化学储量', percentage: 0 },
                { value: 0, name: '剩余电化学储量', percentage: 0 },]
        });
        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function generateTimeArray() {
            return Array.from({ length: 24 * 60 }, (_, index) => {
                const hour = Math.floor(index / 60);
                const minute = index % 60;
                return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
            });
        }
        function init() {
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            api.getShow1({ code: 'show_8', dat: {
                    // cod2: 'his'
                    q: ''
                }, time: [dataContainer.times,dataContainer.times] }).then(res => {
                console.log(res)
                dataContainer.leftOne = res.dat.inf
                dataContainer.data = [
                    { value: 0, name: '当前储电量', percentage: 0 },
                    { value: 0, name: '剩余储电量', percentage: 0 },
                ]
                res.dat.cap.forEach((item, index) => {
                    dataContainer.data[index].value = item.toFixed(2) * 100
                    dataContainer.data[index].name += (item.toFixed(2) * 100 + '%')
                })
                topList.value.forEach((v, index) => {
                    v.value = res.dat.pwr[index].toFixed(2)
                })
                dataInfo.value.xData = generateTimeArray()
                dataInfo1.value.xData = generateTimeArray()
                res.dat.crv=res.dat.crv.map(v=>{
                    if(!Array.isArray(v)){
                        v=[]
                    }
                    return v
                })
                dataInfo.value.data = res.dat.crv
                res.dat.his=res.dat.his.map(v=>{
                    if(!Array.isArray(v)){
                        v=[]
                    }
                    return v
                })
                dataInfo1.value.data = res.dat.his
            })
        }
        onMounted(() => {
            computeRem();
            init()
            // var center = map.getCenter();
        });
        let timer = setInterval(() => {
            computeRem();
            init()
        }, 60000);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });
        const dataInfo = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#e27e9a'],
            name: ['电化学储能实发有功功率(MW)', '电化学储能实发无功功率(MVar)', '电化学储能实时储电量(%)'],
            data: [],
            end: 5,
            xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '24h',],
        })
        const dataInfo1 = ref({
            color: ['#4cdbfe', '#99ffbb', '#ffe274', '#e90001', '#e27e9a'],
            name: ['电化学储能实发有功功率历史数据(MW)', '电化学储能实发无功功率历史数据(MVar)', '电化学储能实时储电量(%)'],
            data: [],
            end: 5,
            xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h', '24h',],
        })
        return {
            dataContainer,
            ViewRef,
            topList,
            dataInfo,
            dataInfo1
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt="">
                            <span class="temp">多云</span>
                            <span class="numberC">10</span>
                            <span class="cs">&nbsp; ℃</span> -->
                            <span class="numberC">电化学储能</span>
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>
                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="left_box">
                    <div class="left_box_item1" style="height: 18rem;">
                        <div class="title">基础信息</div>
                        <left_1 :dataInfo="dataContainer.leftOne"></left_1>
                    </div>
                    <div class="left_box_item1 " style="height: 20rem;">
                        <div class="title">当前电化学储能情况</div>
                        <left_2 :dataInfo="dataContainer.data"></left_2>
                    </div>
                </div>
                <div class="right_box">
                    <div class="right_box_item1" style="height: 18rem;">
                        <div class="title">实时功率指标</div>
                        <div class="lists">
                            <div class="items" v-for="(item, index) in topList">
                                <p>{{ item.name }}</p>
                                <p class="num_p">{{ item.value }} {{ item.unit }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="right_box_item1 changbeij" style="height: 20rem;margin: 0;">
                        <div class="title">电化学储能电站充放电曲线</div>
                        <brokenline :dataInfo="dataInfo"></brokenline>
                    </div>

                </div>

            </div>

            <div class="right_box_item1 changbeij" style="height: 20rem;">
                <div style="display: flex;justify-content: space-between;align-items: center;margin-right: 0.625rem;">
                    <div class="title">电化学储能电站充放电历史数据</div>
                    <el-date-picker v-model="dataContainer.timeValue"
                        style="max-width: 20rem;background: none;transform: translateY(0.188rem);" type="daterange"
                        range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" size="small" />
                </div>

                <brokenline :dataInfo="dataInfo1"></brokenline>
            </div>
        </div>
    </el-scrollbar>
</template>

<style lang="scss" scoped>
.big-screen-view {
    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/images/bjdazong.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        justify-content: space-between;
        width: 100%;

        >.left_box,
        .right_box {
            padding: 0 0.625rem;
            // height: 100%;
            margin-top: 1.250rem;
            overflow: hidden;

            // flex: 1 1 0;
            // width: 37.500rem;
            .title {
                color: #FFFFFF;
                font-size: 1rem;
                // margin-left: 1rem;
                background: url('@/assets/img-show2/smallTitle.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 1.875rem;
                line-height: 1.875rem;
                width: 34rem;
                padding-left: 1rem;
            }



        }

        .left_box {
            width: 30%;

            .left_box_item1 {
                background-image: url('@/assets/img-show2/borderBack.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                margin-bottom: 1.250rem;
                overflow: hidden;

                .box_img {
                    text-align: center;
                    padding: 0.625rem;
                    height: 100%;

                    .imgs {
                        width: 95%;
                        height: 80%;
                    }
                }

                // padding: 1.000rem;
            }
        }

        .right_box {
            width: 70%;

            .right_box_item1 {
                margin-bottom: 1.250rem;
                // background-image: url('@/assets/images/chang.png');
                // background-repeat: no-repeat;
                // background-size: 100% 100%;
                // background-position: center;
                margin-bottom: 1.250rem;

                .lists {

                    // margin: auto 1rem;
                    margin-top: 1.250rem;
                    display: flex;
                    justify-content: space-between;

                    .items {
                        width: 14.375rem;
                        height: 6.875rem;
                        background-image: url('@/assets/images/xiao.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        border-radius: 0.313rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        p {
                            color: #3adeff;
                            font-size: 1.4rem;
                            // margin-top: 1.250rem;
                        }

                        .num_p {
                            font-size: 1.2rem;
                            color: #fff;
                            margin-top: 0.625rem;
                        }
                    }
                }
            }


        }
    }

    .changbeij {
        .title {
            color: #FFFFFF;
            font-size: 1rem;
            // margin-left: 1rem;
            background: url('@/assets/img-show2/smallTitle.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            height: 1.875rem;
            line-height: 1.875rem;
            width: 34rem;
            padding-left: 1rem;
        }

        margin: auto 0.625rem;
        background-image: url('@/assets/images/chang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        margin-bottom: 1.250rem;
    }
}
</style>
